<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
	<title>VForm Demo</title>
	<link rel="stylesheet" href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-plus/2.0.4/index.min.css" />
	<link rel="stylesheet" href="../dists/render.style.css?t=20220204">
	<style type="text/css">
	
	</style>
</head>
<body>
  
  <div id="app">
     
	<el-card class="box-card">
	<template #header>
    <div class="card-header">
      <span>卡片名称</span>
      <el-button class="button" type="text">操作按钮</el-button>
    </div>
  </template>
      <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef"></v-form-render>
           <el-button onclick="close">取 消</el-button>
          <el-button type="primary" @click="submitForm">Submit</el-button>
   </el-card>
	  
	  
  </div>

<script crossorigin="anonymous" integrity="sha512-9l+B+sZNtrdrhFWM0UGiKsRwZctEAfW7h8Z4Ycd3tQyvis8tZCpNkxTxJ3XcCRP54VD9YQs+4PeMVi5ctdlbcw==" src="https://lib.baomitu.com/vue/3.2.30/vue.global.min.js"></script>
	<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-plus/2.0.4/index.full.min.js"></script>
	<!-- <script src="https://ks3-cn-beijing.ksyun.com/vform3/render.umd.js?t=20220129"></script> -->
	<script src="../dists/render.umd.js?t=20220129"></script>
	<script src="./en.js?v=2"></script>
<script>
const { ref, reactive, onMounted, nextTick,createApp } = Vue;
//import { ref, reactive } from 'Vue'
const { ElMessage } = ElementPlus;
	const app = createApp({
      data() {
        return {
          formJson: {"widgetList":[],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","jsonVersion":3,"dataSources":[],"onFormCreated":"","onFormMounted":"","onFormDataChange":""}},
          formData: {},
          optionData: {}
        }
      },
	  mounted() {
			//this.$refs.VFormDesigner.setFormJson(formJson_c)
			axios.get('./data1.json').then(res=>{
			    //console.log(res.data);
				let formJson = res.data;
				formJson = decrypt(formJson)
				//console.log(formJson);
				formJson = JSON.parse(formJson)
				//console.log(formJson);
				this.formJson=formJson;
				this.$refs.vFormRef.setFormJson(formJson);
			}).catch( function(error) {
				alert(error)
			})
		  },
      methods: {
        submitForm() {
          this.$refs.vFormRef.getFormData().then( (formData) => {
            // Form Validation OK
            alert( JSON.stringify(formData) )
          }).catch( function(error) {
            // Form Validation Failed
            alert(error)
          })
        }
      }
	});
	app.use(ElementPlus)
	app.use(VFormRender)
	app.mount("#app");
</script>
</body>
</html>